
Ext.onReady(function() {
			// 复选框
			var sm = new Ext.grid.CheckboxSelectionModel();

			// 定义自动当前页行号
			var rownum = new Ext.grid.RowNumberer({
						header : 'NO',
						width : 28
					});

			// 定义列模型
			var cm = new Ext.grid.ColumnModel([rownum, sm,
			       {header : 'id',dataIndex : 'id',width : 35,hidden:true},
			       {header : '通道', dataIndex : 'channel',sortable : true,width : 70,renderer:channelRenderer},
			       {header : '手机号码',dataIndex : 'phone', sortable : true,width : 100},
			       {header : '发送状态',dataIndex : 'flag', sortable : true,width : 70,renderer:flagRenderer}, 
			       {header : '短信内容',dataIndex : 'content',sortable : true,width : 300},
			       {header : '发送时间',dataIndex : 'attime'}
			       ]);

			
			function channelRenderer(value){
				if(value==0){
					return "中国移动";
				}else if (value==1){
					return "中国联通";
				}else {
					return "中国电信";
				}
			}
			
			
			function flagRenderer(value){
				if(value==-1){
					return "<span style='color:blue'>未发送</span>";
				}else if(value==0){
					return "发送成功";
				}else if (value==-2){
					return "<span style='color:red'>发送失败</span>";
				}else {
					return "<span style='color:red'>未知状态</span>";
				}
			}
			
			function reportStatusRenderer(value){
				if(value==0){
					return "<span style='color:green'>接收成功</span>";
				}else{
					return "<span style='color:red'>接收失败</span>";
				}
			}
			
			/**
			 * 数据存储
			 */
			var store = new Ext.data.Store({
						autoLoad:{params:{
							start : 0,
							limit : 20
						}},
						// 获取数据的方式
						proxy : new Ext.data.HttpProxy({
									url :'smsbox.do?reqCode=queryTempbox'
								}),
						// 数据读取器
						reader : new Ext.data.JsonReader({
									totalProperty : 'TOTALCOUNT', // 记录总数
									root : 'ROOT' // Json中的列表数据根节点
								}, [
								    {name : 'id' },
								    {name : 'channle'},
								    {name : 'phone'}, 
								    {name : 'flag'}, 
								    {name : 'content'}, 
								    {name : 'attime'}, 
								    {name : 'report_status'}, 
								    {name : 'report_code'}
								    ])
					});

			// 翻页排序时带上查询条件
			store.on('beforeload', function() {
						this.baseParams = {
							phone : Ext.getCmp('phone').getValue()
						};
					});
			// 每页显示条数下拉选择框
			var pagesize_combo = new Ext.form.ComboBox({
						name : 'pagesize',
						triggerAction : 'all',
						mode : 'local',
						store : new Ext.data.ArrayStore({
									fields : ['value', 'text'],
									data : [[10, '10条/页'], [20, '20条/页'],
											[50, '50条/页'], [100, '100条/页'],
											[250, '250条/页'], [500, '500条/页']]
								}),
						valueField : 'value',
						displayField : 'text',
						value : '20',
						editable : false,
						width : 85
					});
			var number = parseInt(pagesize_combo.getValue());
			// 改变每页显示条数reload数据
			pagesize_combo.on("select", function(comboBox) {
						bbar.pageSize = parseInt(comboBox.getValue());
						number = parseInt(comboBox.getValue());
						store.reload({
									params : {
										start : 0,
										limit : bbar.pageSize
									}
								});
					});

			// 分页工具栏
			var bbar = new Ext.PagingToolbar({
						pageSize : number,
						store : store,
						displayInfo : true,
						displayMsg : '显示{0}条到{1}条,共{2}条',
						plugins : new Ext.ux.ProgressBarPager(), // 分页进度条
						emptyMsg : "没有符合条件的记录",
						items : ['-', '&nbsp;&nbsp;', pagesize_combo]
					});

			// 表格工具栏
			var tbar = new Ext.Toolbar({
						items : [{
									xtype : 'textfield',
									id : 'phone',
									name : 'phone',
									emptyText : '请输入手机号码',
									width : 150,
									enableKeyEvents : true,
									// 响应回车键
									listeners : {
										specialkey : function(field, e) {
											if (e.getKey() == Ext.EventObject.ENTER) {
												queryCatalogItem();
											}
										}
									}
								}, {
									text : '查询',
									iconCls : 'page_findIcon',
									handler : function() {
										queryCatalogItem();
									}
								}, {
									text : '重置',
									iconCls : 'page_refreshIcon',
									handler : function() {
										Ext.getCmp("phone").setValue();
										queryCatalogItem();
									}
								}]
					});

		

			// 表格实例
			var grid = new Ext.grid.GridPanel({
						// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
						title : '<span class="commoncss">待发送</span>',
						margins : '3 3 3 3',
						height : 500,
						frame : true,
						autoScroll : true,
						region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
						store : store, // 数据存储
						stripeRows : true, // 斑马线
						cm : cm, // 列模型
						sm : sm, // 复选框
						tbar : tbar, // 表格工具栏
						bbar : bbar,// 分页工具栏
						viewConfig : {
			// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
						// forceFit : true
						},
						loadMask : {
							msg : '正在加载表格数据,请稍等...'
						}
					});

			

			// 页面初始自动查询数据
			// store.load({params : {start : 0,limit : bbar.pageSize}});

			

			// 布局模型
			var viewport = new Ext.Viewport({
						layout : 'border',
						items : [grid]
					});

			// 查询表格数据
			function queryCatalogItem() {
				store.load({
							params : {
								start : 0,
								limit : bbar.pageSize,
								phone : Ext.getCmp('phone').getValue()
							}
						});
			}

			

			

		});